<template>
  <!-- 多个标签显示 -->
  <template v-if="labelList.length > 0">
    <el-tag
      v-for="(item, index) in labelList"
      :key="index"
      :type="item.tag ? item.tag : type"
      class="mr-1"
    >
      {{ item.label }}
    </el-tag>
  </template>
  <!-- 单个标签显示 -->
  <template v-else-if="tagType">
    <el-tag :type="tagType ? tagType : type">
      {{ label }}
    </el-tag>
  </template>
  <!-- 纯文本显示 -->
  <template v-else>
    <span>{{ label }}</span>
  </template>
</template>

<script setup>
/**
 * 兼容索引数组，也兼容关联数组
 * 类似功能：ra-dict-tag ，性能方面两者类似
 * code: 传入数据字典的名称即可
 * perms 仅在SQL字典获得数据时有效
 * 原理可参考 store/modules/dict.js getDictionary 可传入两个参数（code,perms）,其中，perms 仅在SQL字典获得数据时有效
 */

import { useDictStore } from '@/store';
import { ref, onMounted, watch } from 'vue';

const dictStore = useDictStore();
const props = defineProps({
  modelValue: [String, Number, Array],
  code: {
    type: String,
  },
  perms: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: 'primary',
  },
  separation: {
    type: String,
    default: ',',
  },
});

const label = ref('');
const tagType = ref(null);
const labelList = ref([]);

// 统一值处理逻辑
const normalizeValues = () => {
  if (Array.isArray(props.modelValue)) {
    return props.modelValue.filter((v) => v !== '');
  }

  if (typeof props.modelValue === 'string') {
    return props.modelValue
      .split(props.separation)
      .map((v) => v.trim())
      .filter((v) => v);
  }

  return [props.modelValue];
};

// 递归查找字典数据中的值
const findDictEntryInTree = (data, value) => {
  if (!data) return null;
  for (const item of data) {
    if (item.value == value) {
      return item;
    }
    if (item.children && item.children.length > 0) {
      const found = findDictEntryInTree(item.children, value);
      if (found) {
        return found;
      }
    }
  }
  return null;
};

// 获取字典数据并查找对应的标签和类型
const getLabelAndTagByValue = async (value) => {
  const dictData = await dictStore.getDictionary(props.code, props.perms);
  const dictEntry = findDictEntryInTree(dictData, value);
  return {
    label: dictEntry ? dictEntry.label : '',
    tag: dictEntry ? dictEntry.tagType : null,
  };
};

// 更新标签和标签类型
const updateLabels = async () => {
  const values = normalizeValues();

  if (values.length > 0) {
    const results = await Promise.all(values.map(getLabelAndTagByValue));
    labelList.value = results.filter((item) => item.label);

    // 处理单个结果的情况
    if (labelList.value.length === 1) {
      label.value = labelList.value[0].label;
      tagType.value = labelList.value[0].tag || 'primary';
      labelList.value = []; // 清空数组触发单个显示
    }
  } else {
    label.value = '';
    tagType.value = null;
    labelList.value = [];
  }
};

// 首次挂载时获取字典数据
onMounted(updateLabels);

// 当 modelValue 发生变化时重新获取
watch(() => props.modelValue, updateLabels);
</script>
